<script setup lang="ts">
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
// @ts-ignore
import 'v-calendar/dist/style.css'
import { Lunar } from 'lunar-typescript' // 引入农历库

const attrs = {
  'transparent': true,//透明
  'borderless': true,//无边框
}

const emit = defineEmits(['dateSent']);

// 新增：农历转换函数
const getLunarDate = (date: Date) => {
  const lunar = Lunar.fromDate(date)
  // 示例格式："腊月初一"（显示月份+日）
  //return `${lunar.getMonthInChinese()}${lunar.getDayInChinese()}`
  return `${lunar.getDayInChinese()}`
}

// 当前选中的日期
const selectedDate = ref();

// 点击日期时触发
const onDayClickNew = (date: any) => {
  selectedDate.value = date;
  emit('dateSent', selectedDate.value);
};

// 判断是否为选中的日期
const isSelected = (date: any) => {
  return selectedDate.value && selectedDate.value.getTime() === new Date(date).getTime();
};
</script>

<template>
  <VCalendarDatePicker
    v-bind="{ ...attrs, ...$attrs }"
  >
     <!-- 新增 day-content 插槽 -->
    <template #day-content="{ day }">
      <div 
        class="day-cell" 
        :class="{'selected': isSelected(day.date)}" 
        @click="onDayClickNew(day.date)"
      >
        <div>{{ day.day }}</div>
        <div class="lunar-day">{{ getLunarDate(day.date) }}</div>
      </div>
    </template>
  </VCalendarDatePicker>
</template>

<style>
:root {
  --vc-gray-50: rgb(var(--color-gray-50));
  --vc-gray-100: rgb(var(--color-gray-100));
  --vc-gray-200: rgb(var(--color-gray-200));
  --vc-gray-300: rgb(var(--color-gray-300));
  --vc-gray-400: rgb(var(--color-gray-400));
  --vc-gray-500: rgb(var(--color-gray-500));
  --vc-gray-600: rgb(var(--color-gray-600));
  --vc-gray-700: rgb(var(--color-gray-700));
  --vc-gray-800: rgb(var(--color-gray-800));
  --vc-gray-900: rgb(var(--color-gray-900));
}

.vc-primary {
  --vc-accent-50: rgb(var(--color-primary-50));
  --vc-accent-100: rgb(var(--color-primary-100));
  --vc-accent-200: rgb(var(--color-primary-200));
  --vc-accent-300: rgb(var(--color-primary-300));
  --vc-accent-400: rgb(var(--color-primary-400));
  --vc-accent-500: rgb(var(--color-primary-500));
  --vc-accent-600: rgb(var(--color-primary-600));
  --vc-accent-700: rgb(var(--color-primary-700));
  --vc-accent-800: rgb(var(--color-primary-800));
  --vc-accent-900: rgb(var(--color-primary-900));
}

.day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 2.5rem; /* 保证单元格高度 */
}

.lunar-day {
  font-size: 0.65rem;  /* 更小字号 */
  color: #666;         /* 更浅颜色 */
  line-height: 1.2;
  margin-top: -2px;    /* 调整间距 */
}

.day-cell.selected {
  background-color: #d9622b;
  color: white;
}
.day-cell.selected .lunar-day {
  color: white; 
}
</style>
